<template>
  <view class="login-container">
    <image class="bg" src="../../static/images/login-bg.png"></image>
    <view class='logo-box'>
      <image class='logo' src='../../static/images/login-logo.png'></image>
      健发协同办公管理系统
    </view>
    <u-form :model="form" ref="uForm" class="form" label-width="120rpx" :error-type="['toast']">
      <u-form-item label="账  号" label-align="center" :border-bottom="false" :left-icon-style="labelStyle">
        <u-input v-model="form.userName"/>
      </u-form-item>
      <u-form-item label="密  码" label-align="center" :border-bottom="false" :left-icon-style="labelStyle">
        <u-input v-model="form.password" type="password"/>
      </u-form-item>
      <view class="tips" @click="exEval">{{ tips }}</view>
      <view class="uni-btn-v">
        <u-button :hair-line="false" ripple size="medium" form-type="submit" @click="bind">绑 定</u-button>
      </view>
    </u-form>
  </view>
</template>

<script>
import {
  evaluate
} from '../../libs/eval5/eval5.min.js'
import { login } from "../../api/login";

export default {
  data() {
    return {
      form: {
        userName: '',
        password: '',
      },
      tips: '提示：首次进入小程序请关联账户信息'
    };
  },
  computed: {
    bindid() {
      return this.$store.state.bindid
    },
    labelStyle() {
      return {
        fontSize: '40rpx',
        color: '#000'
      }
    }
  },
  methods: {
    exEval() {
      let result = evaluate(`context.tips = context.tips.split('').reverse().join('')`, {
        context: this,
        setInterval,
        clearInterval,
        console
      });
      console.log(result)
    },
    async bind() {
      console.log(this.bindid);
      uni.showLoading({
        title: '正在绑定'
      })
      if (this.form.userName === "") {
        uni.showToast({
          title: '必须输入用户名',
          icon: 'none'
        });
        return
      }
      if (this.form.password === "") {
        uni.showToast({
          title: '必须输入密码',
          icon: 'none'
        });
        return
      }
      const { data, code } = await login()

      await this.$store.dispatch('bindUser', {
        ...this.form,
        bindid: data.bindid
      })
      /*if (code === 0) {
        this.routeTo({
          link: 'index',
          type: 'switchTab'
        })
      }*/
    }
  }
}
</script>

<style lang="less">
.login-container {
  position: relative;

  .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  padding: 40rpx;
  min-height: 100vh;
  background-size: 100% 100%;

  .logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48rpx;
    margin-top: 280rpx;
    color: #FFF;
    letter-spacing: 5rpx;

    .logo {
      width: 117rpx;
      height: 91rpx;
    }
  }

  .form {
    margin: 100rpx 50rpx;
    display: block;

    .u-form-item {
      background: #FFF;
      margin-bottom: 20rpx;
      /*border-bottom: 1px solid #000;*/
      padding: 10rpx 0;
      border-radius: 10rpx;
    }

    .tips {
      font-size: 24rpx;
      margin: 20rpx 0;
      color: #FFF;
    }

    .uni-btn-v {
      text-align: center;
      margin-top: 170rpx;

      button {
        background-color: #fff;
        color: #000;
        outline: none;
        border: none;
        font-size: 40rpx;
        padding: 30rpx 40rpx;
      }
    }
  }
}
</style>
